<template>
  <div class="background">
    <div class="border1"></div>
    <div class="border2"></div>
    <div class="border3"></div>
    <img :src="userInfo.avatarUrl" class="userimage"/>
    <div class="userfont">用户名：{{userInfo.nickName}}<br>ID:{{userInfo.id}}<br>分数:{{userInfo.score}}</div>
    <div class="line"></div>
    <div class="label" style="top:51%; left:25%; width:50%; height:8.5%; border-radius:25px; font-size:18px">
      <div class="labelfont" style="margin-left:15%; font-size:18px">正确率:</div>
      <div style="margin-left:6px">{{rate}}%</div>
    </div>
    <div class="label">
      <div class="labelfont">对题：</div>
      <div style="margin-left:6px; color:chartreuse">{{userInfo.rightCount}}</div>
    </div>
     <div class="label" style="margin-top: 15%">
      <div class="labelfont">胜场：</div>
      <div style="margin-left:6px; color:chartreuse">{{userInfo.winCount}}</div>
    </div> 
    <div class="label" style="margin-left: 44.5%">
      <div class="labelfont">错题：</div>
      <div style="margin-left:6px; color:crimson">{{userInfo.wrongCount}}</div>
    </div> 
    <div class="label" style="margin-top: 15%; margin-left: 44.5%">
      <div class="labelfont">败场：</div>
      <div style="margin-left:6px; color:crimson">{{userInfo.loseCount}}</div>
    </div> 
    <div class="bottomfont">胜率不够，场数来凑!</div>
    <button class="returnbutton" @click="returnToIndex">
      <img src="../../../static/images/returnbutton.jpg" style="position:absolute; width:30px; height:30px"/>
    </button>
  </div>
</template>
<script>
import httpkit from '../../utils/http-kit'
import store from '../../utils/store'
export default {
  data () {
    return {
      userInfo: {}
    }
  },
  onLoad () {
    Object.assign(this.$data, this.$options.data())
  },
  computed: {

    rate () {
      if ((parseInt(this.userInfo.rightCount) + parseInt(this.userInfo.wrongCount) !== 0)) {
        return Math.round((parseInt(this.userInfo.rightCount) / (parseInt(this.userInfo.rightCount) + parseInt(this.userInfo.wrongCount))) * 100)
      } else return 100
    }
  },
  mounted () {
    var _this = this
    httpkit.get('/user/hisInformation', {
      userId: store.state.rivalid
    }).then(res => {
      _this.userInfo = res.data
    })
  },

  methods: {
    returnToIndex () {
      wx.navigateBack({})
    }
  }
}
</script>
<style scoped>
.background{
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3451631503,625748521&fm=26&gp=0.jpg);
  background-size: 400px;
  background-repeat:no-repeat;
  background-size: 100% 100%;
}
.border1{
  position: absolute;
  top: 14.5%;
  left: 5%;
  width: 90%;
  height: 80%;
  border-radius: 15px;
  background-color: black;
  opacity: 0.5;
}
.border2{
  position: absolute;
  top: 18%;
  left: 8%;
  width: 84%;
  height: 16%;
  border-radius: 15px;
  background-color: rgb(0, 0, 0);
  opacity: 0.4;
}
.border3{
  position: absolute;
  top: 45%;
  left: 8%;
  width: 84%;
  height: 40%;
  border-radius: 15px;
  background-color: black;
  opacity: 0.5;
}
.userimage{
  position: absolute;
  top: 20.5%;
  left: 14%;
  width: 16%;
  height: 9%;
  border-radius: 50%;
  border-style: solid;
  border-width: 4px;
  border-color: white;
}
.userfont{
  position: absolute;
  top: 22.5%;
  left: 35%;
  color: white;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 18px;
}
.line{
  position: absolute;
  top: 39%;
  left: 12%;
  width: 76%;
  height: 0.5%;
  border-radius: 50%;
  background-color: white;
  opacity: 0.5;
}
.label{
  position: absolute;
  top: 63%;
  left: 12%;
  width: 32%;
  height: 5%;
  border-radius: 17.5px;
  color: white;
  background-color: rgb(23, 23, 77);
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
}
.labelfont{
  margin-left: 18%;
  color: dodgerblue;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
}
.bottomfont{
  position: absolute;
  top: 89%;
  left: 29%;
  color: white;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 3px;
  font-style: italic;
  text-decoration: underline;
}
.returnbutton{
  position: absolute;
  top: 4.5%;
  left: 4%;
  width: 20px;
  height: 38px;
  border-radius: 50%;
  border-style: solid;
  border-width: 3px;
  border-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>